import React, { useState, useEffect } from 'react'
import "./ResourcesPanel.css";
import ResourceCell from '../components/ResourceCell';

import Button from 'react-bootstrap/Button';
import { Rings, Hearts } from 'svg-loaders-react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDoubleRight, faAngleDoubleLeft, faChevronRight,faChevronLeft } from '@fortawesome/free-solid-svg-icons';




///props.loginedUser
///props.update  每次更新+1
///props.onCellViewClick
///props.onCellDeleteClick
function ResourcesPanel(props) {

    const [isBusy, setIsBusy] = useState(false);
    const [offtaskArray, setOfftaskArray] = useState([]);
    const [updater, setUpdater] = useState(props.update);
    const [isHidePanel, setIsHidePanel] = useState(false);

    useEffect(() => {
        if( isBusy===true ) return ;
        const url = global.g_serverAPIRoot + 'offtask/list?uid=' +
            props.loginedUser.uid + '&ipage=0&pagesize=20';
        setIsBusy(true);
        fetch(url)
            .then((res) => res.json())
            .then((json) => {
                setIsBusy(false);
                if (json.state === 0) {
                    if (json.data.allcount > 0)
                        setOfftaskArray(json.data.list);
                    else setOfftaskArray([]);//2022-4-28 bugfixed
                }
            }).catch(err => {
                setIsBusy(false);
                console.log(err);
            });
    }, [props.loginedUser, props.update, updater]) ;


    useEffect(() => {
        const interval = setInterval(() => {
            if(isBusy===false){
                setUpdater(updater => updater + 1);
            }
        }, 10000);//every 10 seconds
        return () => clearInterval(interval);
      }, []);


    const onUpdateClicked = function () {
        setUpdater(updater + 1);
    }



    return (
        <>
            {
                (isHidePanel === false) ? (
                    <div className="ResourcesPanel">
                        <div className="PanelHeader1">
                            <div className="TabBox">
                                <img src='./images/layerB.png' />
                                资源面板
                            </div>
                            {
                                (isBusy) ? <Rings stroke="rgb(53, 151, 209)" style={{position: 'absolute', right: '80px', top: '0px' }} /> : null
                            }
                            <Button size='sm' variant="outline-secondary" onClick={onUpdateClicked} >刷新</Button>
                            <FontAwesomeIcon icon={faChevronRight} color="rgb(53, 151, 209)"
                                style={{cursor:'pointer', position: 'absolute', right: '4px', top: '12px', fontSize: '20px' }}
                                onClick={()=>setIsHidePanel(true)}
                            />
                        </div>

                        <div className='PanelContents'>

                            {
                                offtaskArray.map((item) => (
                                    <ResourceCell key={item.ofid} offtask={item}
                                        onViewClick={props.onCellViewClick}
                                        onDeleteClick={props.onCellDeleteClick}
                                    />
                                ))
                            }
                        </div>
                    </div>
                ) : (
                    <FontAwesomeIcon icon={faChevronLeft} color="rgb(53, 151, 209)"
                    className="ResourcesPanelShowButton"
                                style={{ fontSize: '20px',cursor:'pointer' }}
                                onClick={()=>setIsHidePanel(false)}
                            />
                )
            }

        </>
    )
}

export default ResourcesPanel
